<template>
    <div id="cesiumContainer"></div>
</template>

<script>
    import * as Cesium from 'cesium/Cesium'

    export default {
        name: 'PerspectiveFrustumOutlineGeometry',
        data() {
            return {}
        },
        mounted() {
            this.initCesium();
            this.addFrustumGeometry();
        },
        methods: {
            initCesium: function () {
                this.viewer = new Cesium.Viewer('cesiumContainer', {
                    animation: false,
                    baseLayerPicker: false,
                    fullscreenButton: false,
                    geocoder: false,
                    homeButton: false,
                    infoBox: true,
                    sceneModePicker: false,
                    navigationHelpButton: false,
                    scene3DOnly: true,
                    timeline: false,
                    selectionIndicator: false,//是否显示选取指示器组件
                    shouldAnimate: false,     //自动播放动画控件
                    shadows: true,//是否显示光照投射的阴影
                    terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY,//地质接收阴影
                    sceneMode: Cesium.SceneMode.SCENE3D,
                    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
                        url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer?f=jsapi"
                    })
                });
                this.viewer._cesiumWidget._creditContainer.style.display = "none";  //	去除版权信息

            },
            addFrustumGeometry() {

                let frustum = new Cesium.PerspectiveFrustum({
                    fov: Cesium.Math.toRadians(50),
                    aspectRatio: this.viewer.scene.canvas.clientWidth / this.viewer.scene.canvas.clientHeight,
                    near: 0.1,
                    far: 100
                });
                let headingPitchRoll = new Cesium.HeadingPitchRoll(
                    Cesium.Math.toRadians(0.0),//航向
                    Cesium.Math.toRadians(90.0),//俯仰角
                    Cesium.Math.toRadians(0.0)//翻滚角
                );
                let orientation = Cesium.Transforms.headingPitchRollQuaternion(
                    Cesium.Cartesian3.fromDegrees(113.25841169804333, 23.125257607425485),
                    headingPitchRoll
                );
                //线状视锥
                let frustumGeometry = new Cesium.FrustumOutlineGeometry({
                    frustum: frustum,
                    origin: Cesium.Cartesian3.fromDegrees(113.25841169804333, 23.125257607425485),
                    orientation: orientation
                });
                let geometryInstance = new Cesium.GeometryInstance({
                    geometry: frustumGeometry,
                    attributes: {
                        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.YELLOWGREEN)
                    },
                    id: 'frustumGeometryInstance'
                });
                let primitive = new Cesium.Primitive({
                    geometryInstances: [geometryInstance],
                    appearance: new Cesium.PerInstanceColorAppearance({
                        translucent: false,//半透明,
                        flat: true,//当 true 时，片段着色器中将使用平面阴影，这意味着不考虑光照
                    })
                });
                this.viewer.scene.primitives.add(primitive);
                this.viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(113.25841169804333, 23.125257607425485, 200), // 设置位置
                    orientation: {
                        heading: Cesium.Math.toRadians(0.0), // 方向
                        pitch: Cesium.Math.toRadians(-90.0),// 倾斜角度
                        roll: 0
                    }
                });
            }
        },

    }
</script>

